<template>
    {{xiaoming}}<br>

   
    <br><br>
    <button @click="xiaoming.name='template'">template 改属性</button><br><br>
    <button @click="xiaoming.nameAction()">template action</button><br><br>
    <button @click="xiaoming.$state={name:'temp'}">template state</button><br><br>
    <button @click="xiaoming.$patch({age:2000})">template patch</button><br><br>
    <button @click="xiaoming.$reset()">template reset</button><br><br>
    <hr>

    <button @click="start">直接改属性</button><br><br>
    <button @click="onAction">通过 action</button><br>
    <button @click="onState">通过 state</button><br>
    <button @click="onPatch">通过 patch</button><br>
    <button @click="reset">重置</button>
  
    <hr>
  
  </template>
  
  <script lang="ts">
    import * as pinia  from 'pinia'
    import { toRefs, ref, reactive, readonly } from 'vue'
    import { usePersonStore, useSetup } from './object'
  
    import myLog from './log'
   
  
  </script>
  
  <script lang="ts" setup>
  
    // console.log(pinia)
     
    // console.time('usePersonStore实例化用时')
    // console.timeEnd('usePersonStore实例化用时')

    const xiaoming = usePersonStore()
    myLog(xiaoming)
    console.log('useOption::', xiaoming)
  
    const start = () => {
       // xiaoming.name += '--'
       xiaoming.name = 'aa'
       xiaoming.name = 'bb'
       // xiaoming.nameAction()
    }
    
  
    const reset = () => {
      xiaoming.$reset()
    }
    
    const onAction = () => {
      xiaoming.nameAction('action xxx')
      
    }
    
    const onState = () => {
      xiaoming.$state = {
        isLogin: true,
        name: 'www',
        age: 180,
        info: {
          name: '第二层11111'
        },
        roles: [
            '110',
            '220'
        ]
      }
    }
    
    const onPatch = () => {
      xiaoming.$patch ( {
        info: {
          name: '第二层333'
        },
      })
    }
  
  </script>